<template>
  <m-page-wrapper>
    <a-button @click="handleRefresh">刷新</a-button>
    <a-table 
      :pagination="pagination" 
      :loading="tableLoading" 
      rowKey="id" 
      :dataSource="dataSource" 
      :columns="columns"
      @change="handleTableChange"
     />
  </m-page-wrapper>
</template>
<script setup lang="ts">
import { ref,reactive,h,onMounted } from 'vue';
import { Tag,Button } from 'ant-design-vue';
import { postPage } from '/@/api/sys/post'
// 加载中
const tableLoading = ref(false)
// 数据源
const dataSource = ref([])
// 列定义
const columns = ref([{
  title: '岗位名称',
  dataIndex: 'name',
  key: 'name'
}, {
  title: '唯一编码',
  dataIndex: 'code',
  key: 'code',
  sorter: true,
}, {
  title: '排序',
  dataIndex: 'sort',
  key: 'sort',
  sorter: true,
  defaultSortOrder: 'ascend'
},{
  title: '是否启用',
  dataIndex: 'enabled',
  key: 'enabled',
  customRender({text}: {text: any}): any {
    return h(Tag, {
      color: text?'blue':'pink'
    }, {
      default() {
        return text?'启用':'禁用'
      }
    })
  }
},{
  title: '备注',
  dataIndex: 'remark',
  key: 'remark'
},{
  title: '操作',
  dataIndex: '__ACTION__',
  key: '__ACTION__',
  align: 'center',
  customRender(): any{
    return h('div',{

    },[
      h(Button,{
        size: 'small',
        type: 'link'
      },{
        default() {
          return '编辑'
        }
      }),
      h(Button,{
        size: 'small',
        type: 'link'
      }, {
        default() {
          return '删除'
        }
      })
    ])
  }
}])
// 分页对象定义
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showQuickJumper: true
})
/**
 * 排序对象
 */
const sorter = reactive<{
  field: string | undefined,
  order: string | undefined
}>({
  field: 'sort',
  order: 'ascend'
})
/**
 * 请求数据
 * @param params 
 */
const requestData = (params: any) => {
  tableLoading.value = true
  postPage({
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
    orderBy: sorter.order?`${sorter.field} ${sorter.order.replace('end','')}`:undefined,
    ...params
  }).then((res)=>{
    pagination.total = res.data.recordCount
    dataSource.value = res.data.rows
  }).finally(()=>{
    tableLoading.value = false
  })
}
/**
 * 刷新
 */
const handleRefresh = () =>{
  requestData({})
}
/**
 * 表格事件处理
 * @param pagination 
 * @param filters 
 * @param sorter 
 */
const handleTableChange = (mPagination: {
  current: number,
  pageSize: number
}, filters: any, mSorter: {
  field: string | undefined,
  order: string | undefined
}) => {
  pagination.current = mPagination.current
  pagination.pageSize = mPagination.pageSize
  sorter.field = mSorter.field
  sorter.order = mSorter.order
  requestData({})
}
onMounted(()=>{
  requestData({})
})
</script>
<style lang="less" scoped>
</style>